import React, { useState, useMemo } from 'react'

// useMemo 用法类似useEffact 第一个参数填写回调函数(子组件内更新的事件)，第二个参数是限制哪个参数变化才调用第一个回调函数

const Demo8 = () => {
    const [count, setCount] = useState(0)
    const [num, setNum] = useState(0)

    // useEffect(() => {
    //     setCount(count + 1)
    // }, [count])

    return (
        <div>
            <h2>当前数值{count}</h2>
            <button
                onClick={() => {
                    setCount(count + 1)
                }}
            >
                加
            </button>
            <h2>当前数值{num}</h2>
            <button
                onClick={() => {
                    setNum(num + 1)
                }}
            >
                加
            </button>
            <ChildrenComponent count={count}>我是子组件</ChildrenComponent>
        </div>
    )
}

const ChildrenComponent = ({ count, children }) => {
    function childrenChange(count) {
        console.log('子组件刷新了')
        return <h2>我更新了{count}</h2>
    }

    const childrenHandle = useMemo(() => {
        childrenChange(count)
    }, [count])

    return (
        <div>
            {childrenHandle}
            {count} === {children}
        </div>
    )
}

export default Demo8
